<template>
  <div>
    <el-card>
      <h1>上传简历</h1>

      <div class="resume_upload">
        <el-upload
          class="upload-demo"
          ref="upload"
          accept=".pdf,.docx,doc"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :before-upload="beforeAvatarUpload"
          :limit="1"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取简历文件</el-button
          >
          <el-button
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload"
            >上传到服务器</el-button
          >
          <div slot="tip" class="el-upload__tip">
            只能上传pdf、docx、doc文件，且不超过500kb
          </div>
        </el-upload>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    //提交前对文件类型的验证
    beforeAvatarUpload(file) {
      let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = fileName === "pdf";
      const extension2 = fileName === "docx";
      const extension3 = fileName === "doc";
      if (!extension && !extension2 && !extension3) {
        this.$message({
          message: "上传文件只能是 pdf、docx、doc格式!",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  height: 600px;
  .resume_upload {
    margin-top: 20px;
  }
}
</style>